<template>
  <div>
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in imgList" :key="item">
        <img :src="item" />
      </mt-swipe-item>
    </mt-swipe>
    <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/Home/NewsList">
            <img src="../../img/1.jpg">
            <div class="mui-media-body">新闻资讯</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/Home/photoList">
            <img src="../../img/2.jpg">
            <div class="mui-media-body">图片分享</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/Home/goodslist">
            <img src="../../img/3.jpg">
            <div class="mui-media-body">商品购买</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="#">
            <img src="../../img/4.jpg">
            <div class="mui-media-body">留言反馈</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="#">
            <img src="../../img/5.jpg">
            <div class="mui-media-body">视频专区</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="#">
            <img src="../../img/6.jpg">
            <div class="mui-media-body">联系我们</div>
          </router-link>
        </li>
      </ul>
  </div>
</template>
<style lang="scss">
.mint-swipe {
  height: 200px;
  .mint-swipe-items-wrap {
    :nth-child(1) {
      background: red;
    }
    :nth-child(2) {
      background-color: aqua;
    }
    :nth-child(3) {
      background: pink;
    }
  }
}
.mui-table-view.mui-grid-view.mui-grid-9{
      background: #fff;
      border: 0;
      img{
          width: 100%;
          height: 100%;
      }
  }
  .mui-grid-view.mui-grid-9.mui-table-view-cell{
      border: 0;
  }
</style>
<script>
export default {
  data() {
    return {
      imgList: ["../../img/1.jpg", "../../img/3.jpg", "../../img/4.jpg"]
    };
  }
};
</script>


